<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import { onMounted, reactive, ref, watch } from "vue";
import * as echarts from "echarts";
import storeTheme from "../store/theme.ts";

/* store */
const store = storeTheme();

/* data */
const formData = reactive({
    name: "",
    region: "",
    date1: "",
    date2: "",
    delivery: false,
    type: [],
    resource: "",
    desc: "",
});
const formComponent = ref<FormInstance>();
const formRule = reactive<FormRules<typeof formData>>({
    name: [{ required: true }],
    region: [{ required: true }],
    date1: [{ required: true }],
    date2: [{ required: true }],
    delivery: [{ required: true }],
    type: [{ required: true }],
    resource: [{ required: true }],
    desc: [{ required: true }],
});
const drawer = ref(false);
const chartContainer = ref<HTMLDivElement>();
let chart: echarts.ECharts | null = null;

/* mounted */
onMounted(() => {
    renderChart();
});

/* watch */
watch(
    () => store.mode,
    (value) => {
        if (!chart) return;

        chart.setOption({
            darkMode: value === "dark",
        });
    }
);

/* method */
const onSubmit = () => {
    formComponent.value?.validate((bool) => {
        console.log(bool);
    });
};

const renderChart = () => {
    chart = echarts.init(chartContainer.value);

    const option: echarts.EChartsOption = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                label: {
                    backgroundColor: "#6a7985",
                },
            },
        },
        legend: {
            top: 0,
            data: [
                "Email",
                "Union Ads",
                "Video Ads",
                "Direct",
                "Search Engine",
            ],
        },
        grid: {
            top: 40,
            bottom: 10,
            left: 10,
            right: 10,
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
        ],
        yAxis: [
            {
                type: "value",
            },
        ],
        series: [
            {
                name: "Email",
                type: "line",
                stack: "Total",
                areaStyle: {},
                emphasis: {
                    focus: "series",
                },
                data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
                name: "Union Ads",
                type: "line",
                stack: "Total",
                areaStyle: {},
                emphasis: {
                    focus: "series",
                },
                data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
                name: "Video Ads",
                type: "line",
                stack: "Total",
                areaStyle: {},
                emphasis: {
                    focus: "series",
                },
                data: [150, 232, 201, 154, 190, 330, 410],
            },
            {
                name: "Direct",
                type: "line",
                stack: "Total",
                areaStyle: {},
                emphasis: {
                    focus: "series",
                },
                data: [320, 332, 301, 334, 390, 330, 320],
            },
            {
                name: "Search Engine",
                type: "line",
                stack: "Total",
                label: {
                    show: true,
                    position: "top",
                },
                areaStyle: {},
                emphasis: {
                    focus: "series",
                },
                data: [820, 932, 901, 934, 1290, 1330, 1320],
            },
        ],
    };

    chart.setOption(option);
};
</script>

<template>
    <el-form
        :model="formData"
        :rules="formRule"
        ref="formComponent"
        label-width="auto"
        label-position="top"
        class="theme-form"
    >
        <el-card header="Chart" shadow="never">
            <div ref="chartContainer" class="chart-container"></div>
        </el-card>
        <el-form-item label="Activity name" prop="name">
            <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="Activity zone" prop="region">
            <el-select
                v-model="formData.region"
                placeholder="please select your zone"
            >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
        </el-form-item>
        <el-form-item label="Activity time" required>
            <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker
                        v-model="formData.date1"
                        type="date"
                        placeholder="Pick a date"
                        style="width: 100%"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="2" class="text-center">
                <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
                <el-form-item prop="date2">
                    <el-time-picker
                        v-model="formData.date2"
                        placeholder="Pick a time"
                        style="width: 100%"
                    />
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="Instant delivery" prop="delivery">
            <el-switch v-model="formData.delivery" />
        </el-form-item>
        <el-form-item label="Activity type" prop="type">
            <el-checkbox-group v-model="formData.type">
                <el-checkbox value="Online activities" name="type">
                    Online activities
                </el-checkbox>
                <el-checkbox value="Promotion activities" name="type">
                    Promotion activities
                </el-checkbox>
                <el-checkbox value="Offline activities" name="type">
                    Offline activities
                </el-checkbox>
                <el-checkbox value="Simple brand exposure" name="type">
                    Simple brand exposure
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources" prop="resource">
            <el-radio-group v-model="formData.resource">
                <el-radio value="Sponsor">Sponsor</el-radio>
                <el-radio value="Venue">Venue</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form" prop="desc">
            <el-input v-model="formData.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button @click="drawer = true">Cancel</el-button>
        </el-form-item>

        <el-space direction="vertical" style="width: 100%; align-items: normal">
            <el-alert
                title="Primary alert"
                type="primary"
                description="More text description"
                show-icon
            />
            <el-alert
                title="Success alert"
                type="success"
                description="More text description"
                show-icon
            />
            <el-alert
                title="Info alert"
                type="info"
                description="More text description"
                show-icon
            />
            <el-alert
                title="Warning alert"
                type="warning"
                description="More text description"
                show-icon
            />
            <el-alert
                title="Error alert"
                type="error"
                description="More text description"
                show-icon
            />
        </el-space>

        <el-space direction="vertical" style="width: 100%; align-items: normal">
            <el-tag type="primary">Tag 1</el-tag>
            <el-tag type="success">Tag 2</el-tag>
            <el-tag type="info">Tag 3</el-tag>
            <el-tag type="warning">Tag 4</el-tag>
            <el-tag type="danger">Tag 5</el-tag>
        </el-space>
    </el-form>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
        <span>Hi there!</span>
    </el-drawer>
</template>

<style lang="scss" scoped>
.theme-form {
    max-width: 600px;
    margin: 0 auto;
    max-height: 800px;
    overflow: auto;
    .chart-container {
        height: 300px;
    }
}
</style>
